<template>
	<view class="h-full " style="color: #9FA6B5;">
		<view class="flex justify-between items-center p-4">
			<view class="text-3xl text-white">USDT</view>
			<view class="flex items-center" @click="$refs.lzSelect.show()">
				<view>{{$t('chongbi.qiehuanbizhong')}}</view>
				<u-icon name="arrow-right" color="#9FA6B5" size="12"></u-icon>
			</view>
		</view>
		<u-gap height="8" bgColor="#242424"></u-gap>
		<view class="p-4">
			<view class="flex gap-8">
				<view :class="active==0?'bor-active':'bor-inter'" class="px-4 flex items-center rounded-md" style="width: fit-content;" @click="active=0">
					ERC20
				</view>
				<view :class="active==1?'bor-active':'bor-inter'" class="px-4 flex items-center rounded-md" @click="active=1">
					TRC20
				</view>
			</view>
			<view class="red py-4 text-xs">
				{{$t('chongbi.gdzznjs')}}
			</view>
			<view class="flex justify-center items-center">
				<uqrcode ref="uqrcode" canvas-id="qrcode" value="https://baidu.com" :options="{ margin: 10 }"></uqrcode>
			</view>
			<view class="p-4 py-2 text-white break-all wrap-break-word text-center mt-4" style="background-color: #242424;">
				0xb071a599617ef5142c7c6dac721901f4ae4a08b6
			</view>
			<view class="p-4">
				<u-button color="linear-gradient(90deg,#f6c769,#f3b644)" style="height: 40px;color: #000;" @click="setClipboardData">
					{{$t('chongbi.fuzhidizhi')}}
					<view class="iconfont icon-fuzhi ml-2"></view>
				</u-button>
			</view>
			
			<view class="text-xs mt-4">
				<view>{{$t('chongbi.zxczjexy')}}</view>
				<view>{{$t('chongbi.cdzsnzxdczdz')}}</view>
				<view>{{$t('chongbi.qzfsdcdzfs')}}</view>
			</view>
		</view>
		<lz-select-bi ref="lzSelect"></lz-select-bi>
		
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo', 'api', 'config']),
		},
		components: {},
		data() {
			return {
				active:0,// 0 ERC20 1 TRC20
				
			}
		},
		onLoad(op) {},
		onReady() {},
		methods: {
			// 复制
			setClipboardData(){
				uni.setClipboardData({
					data: '0xb071a599617ef5142c7c6dac721901f4ae4a08b6',
					success: function () {
						uni.showToast({
							title: '复制成功'
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.bor-active {
		border: 1px solid #ceb359;
		position: relative;
		overflow: hidden;
		color: #ceb359;
		height: 34px;
		&::before {
			content: "";
			position: absolute;
			right: 0;
			bottom: -2px;
			height: 0;
			width: 0;
			border: 10px solid;
			border-color: transparent #ceb359 #ceb359 transparent;
			text-align: center;
		}

		&::after {
			content: "√";
			position: absolute;
			right: -4px;
			bottom: -1px;
			height: 15px;
			width: 20px;
			transform: scale(.7);
			text-align: center;
			color: #fff;
		}
	}
	.bor-inter{
		border: 1px solid #49495F;
		background-color: #22222d;
		height: 34px;
	}
</style>